// LESS Color Varaibles -- DO NOT REFERENCE DIRECTLY
@teal: #31C3A2;
@teal-semi: rgba(49, 195, 162, 0.08);
@purple: #8736E0;
@blue: #36ADE0;
@purple-semi: rgba(135, 54, 224, 0.08);
@red: #F85640;
@red-semi: rgba(248, 86, 64, 0.08);
@yellow: #FFC803;
@yellow-dark: #CA9D00;
@yellow-dark-semi: rgba(202, 157, 0, 0.08);
@yellow-light: #FFF9E5;
@goldenrod: #CAA368;
@goldenrod-dark: #8F6F3F;

@light-1: #ffffff;
@light-2: #F5F8FA;
@light-3: #E3E8EB;
@light-4: #BDC2C4;
@light-5: #91979A;

@dark-1: #050D12;
@dark-2: #09161D;
@dark-3: #17242D;
@dark-4: #2B383F;
@dark-5: #4F5E65;

@primedark-1: #0D0D0D;
@primedark-2: #000000;
@primedark-3: #111111;
@primedark-4: #252525;
@primedark-5: #969696;

@primelight-1: #F3F3F3;
@primelight-2: #FFFFFF;
@primelight-3: #D3D3D3;
@primelight-4: #C3C4C6;
@primelight-5: #767676;

@twitch: #9146FF;
@facebook: #1778F2;
@youtube: #D22222;
@mixer: #0078D7;
@twitter: #1DA1F2;

// Variables for use
:root {
  --white: #fff;
  --black: #000;

  // Brand Colors
  --teal: @teal;
  --teal-semi: @teal-semi;
  --teal-hover: lighten(@teal, 4%);
  --accent: @purple;
  --blue: @blue;
  --warning: @red;
  --warning-hover: lighten(@red, 4%);
  --warning-bg: rgba(251, 72, 76, 0.28);
  --warning-button-bg: rgba(251, 72, 76, 0.36);
  --new: @yellow;
  --info-dark: @yellow-dark;
  --info-light: @yellow-light;
  --info-semi: @yellow-dark-semi;
  --red: @red;
  --red-semi: @red-semi;
  --icon: @light-5;
  --icon-active: @teal;
  --icon-semi: fade(@light-5, 15%);
  --prime: @goldenrod;
  --prime-semi: fade(@goldenrod, 15%);

  // Theme Colors
  --background: @light-2;
  --section: @light-3;
  --section-alt: @light-3;
  --titlebar: @dark-4;
  --title: @dark-2;
  --titlebar-title: @light-5;
  --paragraph: @dark-4;
  --border: @light-4;
  --button: @light-4;
  --slider-bg: @dark-2;
  --action-button-text: @light-1;
  --button-hover: darken(@light-4, 8%);
  --link: @dark-5;
  --link-active: @dark-2;
  --input-bg: @light-1;
  --focus-border: darken(@light-4, 4%);
  --solid-input: @light-2;
  --dropdown-bg: @light-1;
  --dropdown-alt-bg: darken(@light-1, 4%);
  --midtone: @light-5;
  --nav-icon-inactive: @dark-4;
  --slider-progress: @dark-5;
  --shadow: rgba(55, 71, 79, 0.12);
  --new-badge: @purple-semi;
  --new-badge-text: @purple;
  --modal-overlay: rgba(0, 0, 0, 0.3);
  --prime-hover: darken(@goldenrod, 8%);

  // 3rd Party Colors
  --twitch: @twitch;
  --twitch-hover: lighten(@twitch, 4%);
  --facebook: @facebook;
  --facebook-hover: lighten(@facebook, 4%);
  --youtube: @youtube;
  --youtube-hover: lighten(@youtube, 4%);
  --mixer: @mixer;
  --mixer-hover: lighten(@mixer, 4%);
  --twitter: @twitter;
  --twitter-hover: lighten(@twitter, 4%);
}

.night-theme {
  --background: @dark-3;
  --section: @dark-2;
  --section-alt: @dark-4;
  --titlebar: @dark-1;
  --titlebar-title: @light-5;
  --title: @light-1;
  --paragraph: @light-4;
  --border: @dark-4;
  --button: @dark-5;
  --slider-bg: @dark-5;
  --action-button-text: @light-1;
  --button-hover: lighten(@dark-5, 8%);
  --link: @light-4;
  --link-active: @light-1;
  --input-bg: transparent;
  --focus-border: lighten(@dark-5, 4%);
  --solid-input: @dark-4;
  --dropdown-bg: @dark-4;
  --dropdown-alt-bg: darken(@dark-4, 4%);
  --midtone: @dark-5;
  --nav-icon-inactive: @light-5;
  --shadow: rgba(1, 2, 2, 0.16);
  --new-badge: @purple;
  --new-badge-text: @light-1;
  --modal-overlay: rgba(0, 0, 0, 0.5);
  --prime-hover: lighten(@goldenrod, 8%);
}

.prime-dark {
  --background: @primedark-3;
  --section: @primedark-2;
  --section-alt: @primedark-4;
  --titlebar: @primedark-1;
  --titlebar-title: @primelight-1;
  --title: @primelight-1;
  --paragraph: @primelight-4;
  --border: @primedark-4;
  --button: @primedark-5;
  --slider-bg: @goldenrod;
  --action-button-text: @primedark-1;
  --button-hover: lighten(@primedark-5, 8%);
  --link: @primelight-4;
  --link-active: @primelight-1;
  --input-bg: transparent;
  --focus-border: lighten(@primedark-5, 4%);
  --solid-input: @primedark-4;
  --dropdown-bg: @primedark-4;
  --dropdown-alt-bg: darken(@primedark-4, 4%);
  --midtone: @primedark-5;
  --nav-icon-inactive: @primelight-5;
  --shadow: rgba(1, 2, 2, 0.16);
  --new-badge: @goldenrod;
  --new-badge-text: @primelight-1;
  --modal-overlay: rgba(0, 0, 0, 0.5);
  --prime-hover: lighten(@goldenrod, 8%);
  --teal: @goldenrod;
  --teal-hover: lighten(@goldenrod, 4%);
  --teal-semi: fade(@goldenrod, 8%);
  --accent: @goldenrod;
  --new: @goldenrod;
  --icon: @goldenrod;
  --icon-active: @primelight-1;
}

.prime-light {
  --background: @primelight-1;
  --section: @primelight-2;
  --section-alt: @primelight-4;
  --titlebar: @primedark-4;
  --title: @primedark-2;
  --titlebar-title: @primelight-1;
  --paragraph: @primedark-4;
  --border: @primelight-4;
  --button: @primelight-3;
  --slider-bg: @goldenrod-dark;
  --action-button-text: @primelight-1;
  --button-hover: darken(@primelight-3, 8%);
  --link: @primedark-5;
  --link-active: @primedark-2;
  --input-bg: @primelight-1;
  --focus-border: darken(@primelight-4, 4%);
  --solid-input: @primelight-3;
  --dropdown-bg: @primelight-1;
  --dropdown-alt-bg: darken(@primelight-1, 4%);
  --midtone: @primelight-5;
  --nav-icon-inactive: @primedark-4;
  --slider-progress: @primedark-5;
  --shadow: rgba(55, 71, 79, 0.12);
  --new-badge: @goldenrod-dark;
  --new-badge-text: @primelight-1;
  --modal-overlay: rgba(0, 0, 0, 0.3);
  --prime: @goldenrod-dark;
  --prime-hover: lighten(@goldenrod-dark, 8%);
  --teal: @goldenrod-dark;
  --teal-hover: lighten(@goldenrod-dark, 4%);
  --teal-semi: fade(@goldenrod-dark, 8%);
  --accent: @goldenrod-dark;
  --new: @goldenrod-dark;
  --icon: @goldenrod-dark;
  --icon-active: @primedark-2;
}
